﻿<script type="text/javascript">
    $(document).ready(function () {
        EventBinder($("#btnRegistrarse"), "click", registrarUsuario);
        EventBinder($("#Usuario"), "keyup", validarUsuario);
        EventBinder($("#Email"), "keyup", validarEmail);
    });

    function registrarUsuario() {
        var todoOk = true;
        var nombreUsuario = $("#Usuario").val();

        if (nombreUsuario.length < 6 || nombreUsuario.length > 20) {
            todoOk = false;
            $("#Usuario").parent().addClass("has-error");
            $("#Usuario").parent().removeClass("has-success");

            $("#errorUsuario").attr("class", "text-danger");
            $("#errorUsuario").text("El nombre de usuario debe tener entre 6 y 20 caracteres");
        }
        else {
            $("#Usuario").parent().removeClass("has-error");
            $("#Usuario").parent().addClass("has-success");
            $("#errorUsuario").text("");
        }

        var contraseña = $("#Contraseña").val();

        if (contraseña.length < 6 || contraseña.length > 20) {
            todoOk = false;
            $("#Contraseña").parent().addClass("has-error");
            $("#Contraseña").parent().removeClass("has-success");

            $("#errorContraseña").attr("class", "text-danger");
            $("#errorContraseña").text("La contraseña debe tener entre 6 y 20 caracteres");
        }
        else {
            $("#Contraseña").parent().removeClass("has-error");
            $("#Contraseña").parent().addClass("has-success");
            $("#errorContraseña").text("");
        }

        var valorEmail = $("#Email").val();

        if (emailValido(valorEmail)) {
            $("#Email").parent().removeClass("has-error");
            $("#Email").parent().addClass("has-success");

            $("#errorEmail").text("");
        }
        else {
            todoOk = false;
            $("#Email").parent().addClass("has-error");
            $("#Email").parent().removeClass("has-success");

            $("#errorEmail").attr("class", "text-danger");
            $("#errorEmail").text("E-mail inválido");
        }

        return todoOk;
    }

    var validarUsuarioTimer;

    function validarUsuario() {
        if (validarUsuarioTimer)
            clearTimeout(validarUsuarioTimer);
        var nombreUsuario = $("#Usuario").val();

        if (nombreUsuario.length >= 6 && nombreUsuario.length <= 20) {
            validarUsuarioTimer = setTimeout(function () {
                $.ajax({
                    url: '@Url.Content("~/Auth/UsuarioDisponible")',
                    data: { nombreUsuario: nombreUsuario },
                    success: function (data) {
                        if (data.Disponible) {
                            $("#Usuario").parent().removeClass("has-error");
                            $("#Usuario").parent().addClass("has-success");
                            $("#errorUsuario").attr("class", "text-success");
                            $("#errorUsuario").text("Usuario " + data.NombreUsuario + " disponible");
                        }
                        else {
                            $("#Usuario").parent().addClass("has-error");
                            $("#Usuario").parent().removeClass("has-success");
                            $("#errorUsuario").attr("class", "text-danger");
                            $("#errorUsuario").text("Usuario " + data.NombreUsuario + " en uso");
                        }
                    }
                });
            }, 1000);
        }
        else {
            $("#errorUsuario").text("");
        }
    }

    var validarEmailTimer;

    function validarEmail() {
        if (validarEmailTimer)
            clearTimeout(validarEmailTimer);
        var email = $("#Email").val();

        if (email.length >= 6 && email.length <= 20) {
            validarEmailTimer = setTimeout(function () {
                $.ajax({
                    url: '@Url.Content("~/Auth/EmailDisponible")',
                    data: { email: email },
                    success: function (data) {
                        if (data.Disponible) {
                            $("#Email").parent().removeClass("has-error");
                            $("#Email").parent().addClass("has-success");
                            $("#errorEmail").attr("class", "text-success");
                            $("#errorEmail").text("E-mail " + data.Email + " disponible");
                        }
                        else {
                            $("#Email").parent().addClass("has-error");
                            $("#Email").parent().removeClass("has-success");
                            $("#errorEmail").attr("class", "text-danger");
                            $("#errorEmail").text("E-mail " + data.Email + " en uso");
                        }
                    }
                });
            }, 1000);
        }
        else {
            $("#errorEmail").text("");
        }
    }
</script>
<div class="contenedorImagenLogin">
    <img alt="Credenciales" src='@Url.Content("~/Contenido/Imagenes/UserPicRegistrarse.png")' />
</div>
<div>
    <form action="~/Auth/Registrarse" method="post" class="form-horizontal formularioLogin">
        @Html.AntiForgeryToken()
        <div class="form-group">
            <label>E-Mail:</label>
            <input type="text" name="Email" id="Email" placeholder="E-Mail" class="form-control" />
            <label id="errorEmail"></label>
        </div>
        <div class="form-group">
            <label>Usuario:</label>
            <input type="text" name="Usuario" id="Usuario" placeholder="Nombre de Usuario" class="form-control" />
            <label id="errorUsuario"></label>
        </div>
        <div class="form-group">
            <label>Contraseña:</label>
            <input type="password" name="Contraseña" id="Contraseña" placeholder="Contraseña" class="form-control" />
            <label id="errorContraseña"></label>
        </div>
        <div class="form-group">
            <button id="btnRegistrarse" class="btn btn-primary">Registrarse</button>
        </div>
    </form>
</div>
